<template>
  <div class="choose-view">
    <div class="bread-con">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: 'maintenance' }">用例维护</el-breadcrumb-item>
        <el-breadcrumb-item>{{caseBread}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="add-case-con">
      <el-form ref="form" :model="form" label-width="120px" :rules="rules">
        <el-form-item label="case编号：" prop="caseNumber">
          <el-input v-model="form.caseNumber"></el-input>
        </el-form-item>
        <el-form-item label="case名称：" prop="caseName">
          <el-input v-model="form.caseName"></el-input>
        </el-form-item>
        <el-form-item label="case分类：" prop="caseType">
          <el-select v-model="form.caseType" placeholder="请选择case分类">
            <el-option :label="v.caseTypeName" :key="v.key" :value="v.id" v-for="v in castType"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="step：">
          <el-button @click="addDomain">新增</el-button>
        </el-form-item>
        <el-form-item label=" ">
          <template>
            <div class="add-temp-div add-temp-num">编号</div>
            <div class="add-temp-div">操作步骤</div>
            <div class="add-temp-div">期望结果</div>
          </template>
        </el-form-item>
        <el-form-item label=" ">
          <template v-for="(v, k) in form.step" v-if="v.isValid">
            <div class="add-temp-div add-temp-num">
              {{k+1}}
            </div>
            <div class="add-temp-div">
              <el-input v-model="v.step" :rules="{required: true, message: '域名不能为空', trigger: 'blur'}"></el-input>
            </div>
            <div class="add-temp-div">
              <el-input v-model="v.expectResult"></el-input>
            </div>
            <div class="add-temp-btn">
              <el-button @click.prevent="removeDomain(v)">删除</el-button>
            </div>
          </template>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(form)">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script type='text/ecmascript-6'>
  import Choose from '../consoleUrl.js';
  const sucStatus = 200;
  export default {
    data() {
      var checkCaseType = (rule, value, callback) => {
        if (!value) {
          callback(new Error('case分类不能为空'));
        } else {
          callback();
        }
      };
      var validateCaseName = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入case名称'));
        } else {
          callback();
        }
      };
      var validateCaseNumber = (rule, value, callback) => {
        if (!value) {
          callback(new Error('请输入case编号'));
        } else {
          callback();
        }
      };
      return {
        form: {
          caseName: '',
          caseNumber: '',
          caseType: '',
          step: [
            {
              step: '',
              expectResult: '',
              id: '',
              isValid: 1
            }
          ]
        },
        caseBread: '新增case',
        edit: false,
        rules: {
          caseNumber: [
            {validator: validateCaseNumber, trigger: 'blur'}
          ],
          caseName: [
            {validator: validateCaseName, trigger: 'blur'}
          ],
          caseType: [
            {validator: checkCaseType, trigger: 'change'}
          ]
        },
        castType: []
      };
    },
    created () {
      let type = this.$route.params.templateType;
      if (type) {
        this.caseBread = '编辑case';
        this.edit = type;
        this.form.caseName = type.caseName;
        this.form.caseNumber = type.caseNumber;
        this.form.caseType = type.caseType;
        this.$ajax({
          method: 'GET',
          url: Choose.caseStep + '?caseId=' + type.caseId
        }).then((response) => {
          if (response.status === sucStatus) {
            this.form.step = response.data.data;
          } else {
            this.$message({
              showClose: true,
              message: response.data.message,
              type: 'error'
            });
          }
        });
      }
      this.$ajax({
        method: 'GET',
        url: Choose.caseType + '?pageSize=10000&pageNum=1'
      }).then((response) => {
        if (response.status === sucStatus) {
          this.castType = response.data.data.list;
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: 'error'
          });
        }
      });
    },
    methods: {
      submitForm(formName) {
        let that = this;
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (this.edit) {
              this.form.caseId = this.edit.caseId;
              this.$ajax({
                method: 'PUT',
                url: Choose.caseList,
                data: this.form
              }).then((response) => {
                if (response.status === sucStatus) {
                  let txt = '修改成功';
                  this.successMsg(txt);
                  window.history.go(-1);
                } else {
                  this.$message({
                    showClose: true,
                    message: response.data.message,
                    type: 'error'
                  });
                }
              }, function () {
                that.$message.error('网络错误');
              });
            } else {
              this.$ajax({
                method: 'POST',
                url: Choose.caseList,
                data: formName
              }).then((response) => {
                if (response.status === sucStatus) {
                  let txt = '添加成功';
                  this.successMsg(txt);
                  window.history.go(-1);
                } else {
                  this.$message({
                    showClose: true,
                    message: response.data.message,
                    type: 'error'
                  });
                }
              }, function () {
                that.$message.error('网络错误');
              });
            }
          } else {
            return false;
          }
        });
      },
      successMsg(txt) {
        this.$message({
          message: txt,
          type: 'success'
        });
      },
      removeDomain(item) {
        let index = this.form.step.indexOf(item);
        if (index !== -1) {
          this.form.step[index].isValid = 0;
        }
      },
      addDomain() {
        this.form.step.push({
          step: '',
          expectResult: '',
          id: '',
          isValid: 1
        });
      }
    }
  };
</script>
<style lang="stylus" rel="stylesheet/stylus">
  .add-case-con
    width: 50%;

  .add-temp-div
    display: inline-block;
    width: 36%;
    margin-bottom: 10px;

  .add-temp-btn
    display: inline-block;

  .add-temp-num
    width: 15%;
</style>
